<template>
    <div class="kgh-container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../assets/images/banner.png" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="container">
                <div class="row section-header text-center">
                    <div class="icon-header">
                        <div class="icon-box">
                            <img src="../assets/images/icon_commend.png" alt="" class="icon">
                        </div>
                        <div class="icon-line">
                            <h2 class="icon-text visible-xs-block" style="width:80%">推荐课程</h2>
                            <h2 class="icon-text hidden-xs" style="width:160px;">推荐课程</h2>
                        </div>
                        <p>以学员满意度，以学员学习效果为本</p>
                    </div>
                </div>
                <!-- /curriculum/list hot 1 -->
                <div class="row">
                    <div class="col-xs-12 col-sm-3" v-for="item in curriculumList" :key="item.id">
                        <Course-item :item="item"></Course-item>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="section section-ad">
            <div class="container">
                <div class="row section-header text-center">
                    <h2>教学优势</h2>
                    <div class="row">
                        <img src="../assets/images/title.png" class="col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2" />
                    </div>
                    <p>以学员满意度，以学员学习效果为本</p>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-3" v-for="item in [1,2,3,4]">
                        <Teach-item></Teach-item>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="section">
            <div class="container">
                <div class="row section-header text-center">
                    <div class="icon-header">
                        <div class="icon-box">
                            <img src="../assets/images/icon_commend.png" alt="" class="icon">
                        </div>
                        <div class="icon-line">
                            <h2 class="icon-text visible-xs-block" style="width:80%">推荐专家</h2>
                            <h2 class="icon-text hidden-xs" style="width:160px;">推荐专家</h2>
                        </div>
                        <p>以学员满意度，以学员学习效果为本</p>
                    </div>
                    <h2></h2>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-3" v-for="item in techList" :key="item.id">
                        <Expert-item :item="item"></Expert-item>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import axios from "axios";
import qs from "qs";
import util from "@/assets/js/utils.js";
// @ is an alias to /src
import CourseItem from "@/components/Course-Item.vue";
import TeachItem from "@/components/Teach-Item.vue";
import ExpertItem from "@/components/Expert-Item.vue";

export default {
  name: "index",
  data() {
    return {
      curriculumList: [],
      techList: []
    };
  },
  components: {
    CourseItem,
    TeachItem,
    ExpertItem
  },
  created() {
    this.fetchCurriculumList();
    this.fetchTechList();
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  methods: {
    fetchCurriculumList() {
      //推荐课程
      let that = this;
      axios
        .post(
          "/curriculum/list",
          qs.stringify({
            ctype: "",
            category: "",
            hot: 1,
            name: "",
            from: ""
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            that.curriculumList = response.data.data.slice(0, 4);
          } else if (response.data.errCode == "ERROR_CODE_000000") {
            util.loginOver.call(that);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    fetchTechList() {
      //推荐专家
      let that = this;
      axios
        .post(
          "/my/techListByClassify",
          qs.stringify({
            id: "",
            hot: 1,
            name: "",
            from: ""
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            that.techList = response.data.data.slice(0, 4);
          } else if (response.data.errCode == "ERROR_CODE_000000") {
            util.loginOver.call(that);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
